import React, { Component } from "react";
import { View, Text } from "@tarojs/components";
import { AtButton } from "taro-ui";
import Taro from "@tarojs/taro";

import "./index.less";

class Test extends Component {
  // 可以使用所有的 React 生命周期方法
  componentDidMount() {}

  // 对应 onLaunch
  onLaunch() {}

  // 对应 onShow
  componentDidShow() {}

  // 对应 onHide
  componentDidHide() {}
  // 返回
  goBack = () => {
    Taro.navigateBack();
  };
  // 去考试
  goExam = () => {
    Taro.navigateTo({ url: "/pages/study/test/exam/index" });
  };
  render() {
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    return (
      <View className="study">
        <View className="title">
          <Text
            onClick={this.goBack}
            className="at-icon at-icon-chevron-left color"
          ></Text>
          <Text className="con">考试</Text>
        </View>
        <View className="tip">
          <View className="top">温馨提示</View>
          <View className="middle">
            考试开始后不得退出，如退出将视为提前交卷，无法重新进入考试。
          </View>
          <View className="footer">
            剩余考试机会<Text className="green">3</Text>次
          </View>
        </View>
        <View className="content">
          <View className="top">题型预览</View>
          <View className="middle">
            本套练习共
            <Text className="green">5</Text>道题,满分
            <Text className="green">100</Text>分
          </View>
          <View className="footer">
            答题时间：<Text>00:00:00</Text>
          </View>
        </View>
        <View className="question_type">
          <View>
            单选题<Text className="green">5</Text>道题
          </View>
          <View>共100分</View>
        </View>
        <AtButton className="submit" type="primary" onClick={this.goExam}>
          开始答题
        </AtButton>
      </View>
    );
  }
}

export default Test;
